<template>
  <el-table
    class="question-table"
    :data="questionList"
    style="width: 100%"
    row-key="question_id"
    @row-click="onRowClick"
    :expand-row-keys="expandKeys"
  >
    <el-table-column type="expand" width="1">
      <template #default>
        <div class="expand-box flex">
          <div class="process-box">
            <ProcessList :process-list="processList" :sum="sum" />
          </div>
          <div class="student-box">
            <div
              class="answer-box"
              v-for="(answer, index) in processList"
              :key="index"
            >
              <div class="flex">
                <template v-if="answer.statistics_type === 5">
                  <img class="index-img" :src="answer.text" />

                  &nbsp; ({{ answer.list.length }})人
                </template>

                <span v-else :class="answer.isCorrect && 'correct-answer'">
                  {{ answer.text }}
                  &nbsp; ({{ answer.list.length }})人
                </span>
                <span
                  v-if="answer.statistics_type !== 5"
                  class="correct-answer"
                >
                  &nbsp;&nbsp;{{ answer.isCorrect ? '正答' : '' }}
                </span>
              </div>
              <div class="student-list flex">
                <div
                  class="student-item flex"
                  v-for="(student, index) in answer.list"
                  :key="index"
                >
                  <div class="student-name text-ellipsis">
                    {{ student.student_name }}
                  </div>
                  {{ student.completed_at }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="题号" prop="serial_number">
      <template #default="props">
        <div class="index-box flex-center">
          <img
            v-if="expandKeys.indexOf(props.row.question_id) >= 0"
            class="toggle-img hover"
            src="@/assets/images/assignment/toggle1.png"
          />
          <img
            v-else
            class="toggle-img hover"
            src="@/assets/images/assignment/toggle2.png"
          />
          {{ props.row.serial_number }}
        </div>
      </template>
    </el-table-column>
    <el-table-column label="平均正确率" prop="average_accuracy">
      <template #default="scope">
        {{ (scope.row.average_accuracy * 100).toFixed(0) }}%
      </template>
    </el-table-column>
    <el-table-column label="正确率排名" prop="average_rank">
      <template #header> 正确率<sup>排名</sup> </template>
      <el-table-column
        v-for="(classItem, index) in classColumns"
        :key="index"
        :label="classItem.class_name"
        :prop="classItem.class_id"
      >
        <template #default="scope">
          {{
            (scope.row[classItem.class_id].average_accuracy * 100).toFixed(0)
          }}%
          <sup>{{ scope.row[classItem.class_id].rank }}</sup>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { ref } from 'vue'
import {
  getQuestionCompareList,
  getCompareResponseStatistics
} from '@/apis/assignment/index'

import ProcessList from './ProcessList.vue'
import { rankMap, getType6Text } from '../util'

const props = defineProps({
  taskId: {
    required: true
  }
})

const classColumns = ref([])
const questionList = ref([])
const expandKeys = ref([])

/* eslint-enable */
const onRowClick = param => {
  if (expandKeys.value.length && expandKeys.value[0] === param.question_id) {
    expandKeys.value = []
    return
  }
  expandKeys.value = [param.question_id]
  getCompareResponseStatisticsInfo(param)
}

/**
 * 获取列表展示各个题目详情
 */
const getQuestionCompareListInfo = async () => {
  const res = await getQuestionCompareList({
    task_id: props.taskId
  })
  let list = res.data.map(question => {
    if (question.child_average) {
      return question.child_average.map(child => ({
        childIndex: child.serial_number,
        ...child,
        serial_number: question.serial_number + '-' + child.serial_number
      }))
    }
    return question
  })

  questionList.value = list.flat().map(question => {
    let item = {
      ...question
    }
    question.class_averages.forEach(child => {
      if (
        !classColumns.value.find(param => param.class_id === child.class_id)
      ) {
        classColumns.value.push({
          class_id: child.class_id,
          class_name: child.class_name
        })
      }
      item[child.class_id] = child
    })
    return item
  })
}

const processList = ref([])
const sum = ref(0)
/**
 * 单题下学生的作答情况对比
 */
const getCompareResponseStatisticsInfo = async question => {
  const res = await getCompareResponseStatistics({
    task_id: props.taskId,
    question_id: question.question_id,
    item_type: question.childIndex ? 2 : 1
  })
  const data = res.data.result || {}
  sum.value = res.data.student_count || 0
  const { question_detail } = res.data
  let { correct_answer } = question.childIndex
    ? question_detail.subproblem.find(item => item.id === question.question_id)
    : question_detail
  correct_answer = correct_answer ? correct_answer.join('') : ''

  const list = Object.keys(data)
  processList.value = list.map(key => {
    let param = {
      key,
      isCorrect: false,
      list: data[key].list,
      statistics_type: res.data.statistics_type
    }
    switch (param.statistics_type) {
      case 1:
      case 2:
      case 3:
        param.text = key
        param.isCorrect = key == correct_answer
        break
      case 4:
        param.text = key === 'correct' ? '选: 对/T' : '选: 错/F'
        param.isCorrect =
          (key === 'correct' && correct_answer == 0) ||
          (key === 'wrong' && correct_answer == 1)
        break
      case 5:
        param.text = rankMap[key]
        break
      case 6:
        param.text = getType6Text(key, res.data.set_total_score)
    }
    return param
  })
}

const initData = () => {
  getQuestionCompareListInfo()
}
initData()
</script>

<style lang="less" scoped>
.question-table {
  .expand-box {
    padding: 20px;
    align-items: self-start;
    background-color: #f8fafd;
    .process-box {
      min-height: 100px;
      width: 400px;
      border-right: 1px solid #dce2ef;
    }
    .student-box {
      flex: 1;
      gap: 20px;
      padding: 20px;

      .index-img {
        width: 24px;
        margin-bottom: 2px;
      }
      .correct-answer {
        color: #4ec680;
      }
      .student-list {
        flex-wrap: wrap;
        margin: 4px 0 16px;
        gap: 12px;
        .student-item {
          padding: 4px;
          border: #dce1ef 1px solid;
          .student-name {
            margin-right: 2px;
            max-width: 80px;
          }
        }
      }
    }
  }
  .index-box {
    gap: 10px;
    .toggle-img {
      width: 24px;
      height: 24px;
    }
  }
  :deep(.cell) {
    text-align: center !important;
  }
  :deep(.el-table__expand-icon) {
    visibility: hidden;
  }
}
</style>
